const themes = [
  {
    name: "light",
    message: "Light theme is on!"
  },
  {
    name: "dark",
    message: "Dark theme is on!"
  },
  {
    name: "pink",
    message: "Pink theme is on!"
  },
  {
    name: "skyblue",
    message: "Skyblue theme is on!"
  }
]

const btn = document.getElementById("theme-switcher-button");
const menu = document.getElementById("theme-dropdown");
const status = document.querySelector('[aria-live="polite"]');
const body = document.querySelector("body");

btn.addEventListener("click", () => {
  menu.hidden = !menu.hidden;
  if (menu.hidden) {
    btn.setAttribute("aria-expanded", "false");
  } else {
  btn.setAttribute("aria-expanded", "true");
  }
});

menu.addEventListener("click", e => {
  const themeEl = document.getElementById(e.target.id);
  const themeObj = themes.filter(({name}) => name.toLowerCase() === e.target.id.split("-")[1]
  )[0];
  body.className = e.target.id;
  console.log(body.className)
  status.textContent = themeObj.message;
})